<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JavaScript规范 | 孙加俊的个人博客</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/sjj-blog/favicon.ico">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/sjj-blog/assets/css/0.styles.a5cb6817.css" as="style"><link rel="preload" href="/sjj-blog/assets/js/app.ab5bad9b.js" as="script"><link rel="preload" href="/sjj-blog/assets/js/3.136f62ef.js" as="script"><link rel="preload" href="/sjj-blog/assets/js/1.a27fba8e.js" as="script"><link rel="preload" href="/sjj-blog/assets/js/17.1bacbab3.js" as="script"><link rel="prefetch" href="/sjj-blog/assets/js/10.9271e5b8.js"><link rel="prefetch" href="/sjj-blog/assets/js/11.67b9ea44.js"><link rel="prefetch" href="/sjj-blog/assets/js/12.f69e6353.js"><link rel="prefetch" href="/sjj-blog/assets/js/13.ace41b19.js"><link rel="prefetch" href="/sjj-blog/assets/js/14.78670b1e.js"><link rel="prefetch" href="/sjj-blog/assets/js/15.b0aaec82.js"><link rel="prefetch" href="/sjj-blog/assets/js/16.f0d479dc.js"><link rel="prefetch" href="/sjj-blog/assets/js/18.2237a65f.js"><link rel="prefetch" href="/sjj-blog/assets/js/19.7e0f4bf8.js"><link rel="prefetch" href="/sjj-blog/assets/js/20.5c098df8.js"><link rel="prefetch" href="/sjj-blog/assets/js/21.45bd5038.js"><link rel="prefetch" href="/sjj-blog/assets/js/4.cc582e42.js"><link rel="prefetch" href="/sjj-blog/assets/js/5.9c9443fe.js"><link rel="prefetch" href="/sjj-blog/assets/js/6.370fb6dd.js"><link rel="prefetch" href="/sjj-blog/assets/js/7.e5d26899.js"><link rel="prefetch" href="/sjj-blog/assets/js/8.f6b78670.js"><link rel="prefetch" href="/sjj-blog/assets/js/9.d915a2b8.js">
    <link rel="stylesheet" href="/sjj-blog/assets/css/0.styles.a5cb6817.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-1aefc0b4><div data-v-1aefc0b4><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-1aefc0b4 data-v-1aefc0b4><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-25ba6db2 data-v-1aefc0b4 data-v-1aefc0b4><h3 class="title" data-v-25ba6db2 data-v-25ba6db2>孙加俊的个人博客</h3> <p class="description" data-v-25ba6db2 data-v-25ba6db2></p> <label id="box" class="inputBox" data-v-25ba6db2 data-v-25ba6db2><input type="password" value="" data-v-25ba6db2> <span data-v-25ba6db2>Konck! Knock!</span> <button data-v-25ba6db2>OK</button></label> <div class="footer" data-v-25ba6db2 data-v-25ba6db2><span data-v-25ba6db2><i class="iconfont reco-theme" data-v-25ba6db2></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-25ba6db2>vuePress-theme-reco</a></span> <span data-v-25ba6db2><i class="iconfont reco-copyright" data-v-25ba6db2></i> <a data-v-25ba6db2><span data-v-25ba6db2>孙加俊</span>
            
          <span data-v-25ba6db2>2017 - </span>
          2023
        </a></span></div></div> <div class="hide" data-v-1aefc0b4><header class="navbar" data-v-1aefc0b4><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/sjj-blog/" class="home-link router-link-active"><img src="/sjj-blog/logo.png" alt="孙加俊的个人博客" class="logo"> <span class="site-name">孙加俊的个人博客</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/sjj-blog/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      技术栈
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sjj-blog/categories/规范/" class="nav-link"><i class="undefined"></i>
  规范
</a></li><li class="dropdown-item"><!----> <a href="/sjj-blog/categories/原生JS/" class="nav-link"><i class="undefined"></i>
  原生JS
</a></li></ul></div></div><div class="nav-item"><a href="/sjj-blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      文档
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sjj-blog/docs/theme-reco/" class="nav-link"><i class="undefined"></i>
  vuepress-reco
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      联系我
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/sir-jun" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-1aefc0b4></div> <aside class="sidebar" data-v-1aefc0b4><div class="personal-info-wrapper" data-v-39576ba9 data-v-1aefc0b4><img src="/sjj-blog/avatar.png" alt="author-avatar" class="personal-img" data-v-39576ba9> <h3 class="name" data-v-39576ba9>
    孙加俊
  </h3> <div class="num" data-v-39576ba9><div data-v-39576ba9><h3 data-v-39576ba9>11</h3> <h6 data-v-39576ba9>Articles</h6></div> <div data-v-39576ba9><h3 data-v-39576ba9>3</h3> <h6 data-v-39576ba9>Tags</h6></div></div> <ul class="social-links" data-v-39576ba9></ul> <hr data-v-39576ba9></div> <nav class="nav-links"><div class="nav-item"><a href="/sjj-blog/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      技术栈
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sjj-blog/categories/规范/" class="nav-link"><i class="undefined"></i>
  规范
</a></li><li class="dropdown-item"><!----> <a href="/sjj-blog/categories/原生JS/" class="nav-link"><i class="undefined"></i>
  原生JS
</a></li></ul></div></div><div class="nav-item"><a href="/sjj-blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      文档
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/sjj-blog/docs/theme-reco/" class="nav-link"><i class="undefined"></i>
  vuepress-reco
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      联系我
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/sir-jun" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-25ba6db2 data-v-1aefc0b4><h3 class="title" data-v-25ba6db2 data-v-25ba6db2>JavaScript规范</h3> <!----> <label id="box" class="inputBox" data-v-25ba6db2 data-v-25ba6db2><input type="password" value="" data-v-25ba6db2> <span data-v-25ba6db2>Konck! Knock!</span> <button data-v-25ba6db2>OK</button></label> <div class="footer" data-v-25ba6db2 data-v-25ba6db2><span data-v-25ba6db2><i class="iconfont reco-theme" data-v-25ba6db2></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-25ba6db2>vuePress-theme-reco</a></span> <span data-v-25ba6db2><i class="iconfont reco-copyright" data-v-25ba6db2></i> <a data-v-25ba6db2><span data-v-25ba6db2>孙加俊</span>
            
          <span data-v-25ba6db2>2017 - </span>
          2023
        </a></span></div></div> <div data-v-1aefc0b4><main class="page"><section><div class="page-title"><h1 class="title">JavaScript规范</h1> <div data-v-f875f3fc><i class="iconfont reco-account" data-v-f875f3fc><span data-v-f875f3fc>孙加俊</span></i> <i class="iconfont reco-date" data-v-f875f3fc><span data-v-f875f3fc>7/20/2023</span></i> <!----> <i class="tags iconfont reco-tag" data-v-f875f3fc><span class="tag-item" data-v-f875f3fc>规范</span></i></div></div> <div class="theme-reco-content content__default"><h1 id="javascript-规范"><a href="#javascript-规范" class="header-anchor">#</a> JavaScript 规范</h1> <h2 id="类型"><a href="#类型" class="header-anchor">#</a> 类型</h2> <ul><li><p>原始类型: 存取原始类型直接作用于值本身</p> <ul><li>布尔类型</li> <li>Null 类型</li> <li>Undefined 类型</li> <li>数字类型</li> <li>BigInt 类型</li> <li>字符串类型</li> <li>符号类型 Symbol</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">let</span> bar <span class="token operator">=</span> foo

bar <span class="token operator">=</span> <span class="token number">9</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">,</span> bar<span class="token punctuation">)</span> <span class="token comment">// 1, 9</span>
</code></pre></div><ul><li><p>复杂类型: 访问复杂类型作用于值的引用</p> <ul><li>object</li> <li>array</li> <li>function</li> <li>const foo = [1, 2, 3]</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> bar <span class="token operator">=</span> foo

bar<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">9</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> bar<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 9, 9</span>
</code></pre></div><h2 id="引用"><a href="#引用" class="header-anchor">#</a> 引用</h2> <ul><li>请记得 const 和 let 都是块级作用域，var 是函数级作用域</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Const和let只存在于定义它们的块级作用域中。</span>
<span class="token punctuation">{</span>
  <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span>
  <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// ReferenceError</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// ReferenceError</span>
</code></pre></div><ul><li>对所有引用都使用 const，不要使用 var eslint: eslint: prefer-const, no-const-assign</li></ul> <blockquote><p>原因：这样做可以确保你无法重新分配引用，以避免出现错误和难以理解的代码</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">2</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token number">2</span>
</code></pre></div><ul><li>如果引用是可变动的，使用 let 代替 var，eslint: no-var</li></ul> <blockquote><p>原因：let 是块级作用域的，而不像 var 属于函数级作用域</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">var</span> count <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  count <span class="token operator">+=</span> <span class="token number">1</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  count <span class="token operator">+=</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="对象"><a href="#对象" class="header-anchor">#</a> 对象</h2> <ul><li>请使用字面量值创建对象，eslint: no-new-object</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><ul><li>别使用保留字作为对象的键值，这样在 IE8 下不会运行</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token comment">// default 是保留字</span>
  <span class="token literal-property property">common</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">common</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>当使用动态属性名创建对象时，请使用对象计算属性名来进行创建</li></ul> <blockquote><p>原因：因为这样做就可以让你在一个地方定义所有的对象属性</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">getKey</span><span class="token punctuation">(</span><span class="token parameter">k</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">a key named </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>k<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'San Francisco'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">[</span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token string">'enabled'</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">true</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'San Francisco'</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token string">'enabled'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>请使用对象方法的简写方式，eslint: object-shorthand</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>

  <span class="token function-variable function">addValue</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> item<span class="token punctuation">.</span>value <span class="token operator">+</span> val
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>

  <span class="token function">addValue</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> item<span class="token punctuation">.</span>value <span class="token operator">+</span> val
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>请使用对象属性值的简写方式，eslint: object-shorthand</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> job <span class="token operator">=</span> <span class="token string">'FrontEnd'</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">job</span><span class="token operator">:</span> job
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token punctuation">{</span>
  job
<span class="token punctuation">}</span>
</code></pre></div><ul><li>将简写的对象属性分组后统一放到对象声明的开头</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> job <span class="token operator">=</span> <span class="token string">'FrontEnd'</span>
<span class="token keyword">const</span> department <span class="token operator">=</span> <span class="token string">'JDC'</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">sex</span><span class="token operator">:</span> <span class="token string">'male'</span><span class="token punctuation">,</span>
  job<span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
  department
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token punctuation">{</span>
  job<span class="token punctuation">,</span>
  department<span class="token punctuation">,</span>
  <span class="token literal-property property">sex</span><span class="token operator">:</span> <span class="token string">'male'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">25</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>只对非法标识符的属性使用引号，eslint: quote-props</li></ul> <blockquote><p>原因：因为通常来说我们认为这样主观上会更容易阅读，这样会带来代码高亮上的提升，同时也更容易被主流 JS 引擎优化</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> bad <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token string-property property">'foo'</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  <span class="token string-property property">'bar'</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
  <span class="token string-property property">'data-blah'</span><span class="token operator">:</span> <span class="token number">5</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> good <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
  <span class="token string-property property">'data-blah'</span><span class="token operator">:</span> <span class="token number">5</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>不要直接使用 Object.prototype 的方法, 例如 hasOwnProperty, propertyIsEnumerable 和 isPrototypeOf 方法，eslint: no-prototype-builtins</li></ul> <blockquote><p>原因：这些方法可能会被对象自身的同名属性覆盖 - 比如 { hasOwnProperty: false } 或者对象可能是一个 null 对象(Object.create(null))</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>object<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>object<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// best</span>
<span class="token keyword">const</span> has <span class="token operator">=</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>hasOwnProperty <span class="token comment">// cache the lookup once, in module scope.</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">has</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>object<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token comment">/* or */</span>
<span class="token keyword">import</span> has <span class="token keyword">from</span> <span class="token string">'has'</span> <span class="token comment">// https://www.npmjs.com/package/has</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">has</span><span class="token punctuation">(</span>object<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>优先使用对象展开运算符 ... 来做对象浅拷贝而不是使用 Object.assign，使用对象剩余操作符来获得一个包含确定的剩余属性的新对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// very bad</span>
<span class="token keyword">const</span> original <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span>
<span class="token keyword">const</span> copy <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>original<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// this mutates `original` ಠ_ಠ</span>
<span class="token keyword">delete</span> copy<span class="token punctuation">.</span>a <span class="token comment">// so does this</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> original <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span>
<span class="token keyword">const</span> copy <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> original<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// copy =&gt; { a: 1, b: 2, c: 3 }</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> original <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span>
<span class="token keyword">const</span> copy <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>original<span class="token punctuation">,</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span> <span class="token comment">// copy =&gt; { a: 1, b: 2, c: 3 }</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span> a<span class="token punctuation">,</span> <span class="token operator">...</span>noA <span class="token punctuation">}</span> <span class="token operator">=</span> copy <span class="token comment">// noA =&gt; { b: 2, c: 3 }</span>
</code></pre></div><h2 id="数组"><a href="#数组" class="header-anchor">#</a> 数组</h2> <ul><li>请使用字面量值创建数组，eslint: no-array-constructor</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
</code></pre></div><ul><li>向数组中添加元素时，请使用 push 方法</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>

<span class="token comment">// bad</span>
items<span class="token punctuation">[</span>items<span class="token punctuation">.</span>length<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'test'</span>

<span class="token comment">// good</span>
items<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>使用展开运算符 ... 复制数组</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> itemsCopy <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> len <span class="token operator">=</span> items<span class="token punctuation">.</span>length
<span class="token keyword">let</span> i

<span class="token comment">// bad</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  itemsCopy<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> items<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
itemsCopy <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>items<span class="token punctuation">]</span>
</code></pre></div><ul><li>把一个可迭代的对象转换为数组时，使用展开运算符 ... 而不是 Array.from</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.foo'</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> nodes <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span>

<span class="token comment">// best</span>
<span class="token keyword">const</span> nodes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>foo<span class="token punctuation">]</span>
</code></pre></div><ul><li>使用 Array.from 来将一个类数组对象转换为数组</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arrLike <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token operator">:</span> <span class="token string">'baz'</span><span class="token punctuation">,</span> <span class="token literal-property property">length</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arrLike<span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>arrLike<span class="token punctuation">)</span>
</code></pre></div><ul><li>遍历迭代器进行映射时使用 Array.from 代替扩展运算符 ..., 因为这可以避免创建中间数组</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> baz <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>foo<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>bar<span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> baz <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>foo<span class="token punctuation">,</span> bar<span class="token punctuation">)</span>
</code></pre></div><ul><li>使用数组的 map 等方法时，请使用 return 声明，如果是单一声明语句的情况，可省略 return</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span>
  <span class="token keyword">return</span> x <span class="token operator">*</span> y
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> x <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> flat <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo<span class="token punctuation">,</span> item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> flatten <span class="token operator">=</span> memo<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
  flat<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> flatten
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> flat <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo<span class="token punctuation">,</span> item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> flatten <span class="token operator">=</span> memo<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
  flat<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> flatten
  <span class="token keyword">return</span> flatten
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// bad</span>
inbox<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> subject<span class="token punctuation">,</span> author <span class="token punctuation">}</span> <span class="token operator">=</span> msg
  <span class="token keyword">if</span> <span class="token punctuation">(</span>subject <span class="token operator">===</span> <span class="token string">'Mockingbird'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> author <span class="token operator">===</span> <span class="token string">'Harper Lee'</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token boolean">false</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
inbox<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> subject<span class="token punctuation">,</span> author <span class="token punctuation">}</span> <span class="token operator">=</span> msg
  <span class="token keyword">if</span> <span class="token punctuation">(</span>subject <span class="token operator">===</span> <span class="token string">'Mockingbird'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> author <span class="token operator">===</span> <span class="token string">'Harper Lee'</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>如果一个数组有多行则要在数组的开括号后和闭括号前使用新行</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>
<span class="token punctuation">]</span>

<span class="token keyword">const</span> objectInArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>

<span class="token keyword">const</span> numberInArray <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span>
<span class="token punctuation">]</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">]</span>

<span class="token keyword">const</span> objectInArray <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

<span class="token keyword">const</span> numberInArray <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token number">2</span>
<span class="token punctuation">]</span>
</code></pre></div><h2 id="解构赋值"><a href="#解构赋值" class="header-anchor">#</a> 解构赋值</h2> <ul><li>当需要使用对象的多个属性时，请使用解构赋值，eslint: prefer-destructuring</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">getFullName</span> <span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> firstName <span class="token operator">=</span> user<span class="token punctuation">.</span>firstName
  <span class="token keyword">const</span> lastName <span class="token operator">=</span> user<span class="token punctuation">.</span>lastName

  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">getFullName</span> <span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> firstName<span class="token punctuation">,</span> lastName <span class="token punctuation">}</span> <span class="token operator">=</span> user

  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>

<span class="token comment">// better</span>
<span class="token keyword">function</span> <span class="token function">getFullName</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> firstName<span class="token punctuation">,</span> lastName <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>当需要使用数组的多个值时，请同样使用解构赋值，eslint: prefer-destructuring</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> first <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
<span class="token keyword">const</span> second <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>first<span class="token punctuation">,</span> second<span class="token punctuation">]</span> <span class="token operator">=</span> arr
</code></pre></div><ul><li>函数需要回传多个值时，请使用对象的解构，而不是数组的解构</li></ul> <blockquote><p>原因：可以非破坏性地随时增加或者改变属性顺序</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">doSomething</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span>top<span class="token punctuation">,</span> right<span class="token punctuation">,</span> bottom<span class="token punctuation">,</span> left<span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// 如果是数组解构，那么在调用时就需要考虑数据的顺序</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>top<span class="token punctuation">,</span> xx<span class="token punctuation">,</span> xxx<span class="token punctuation">,</span> left<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">doSomething</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span> top<span class="token punctuation">,</span> right<span class="token punctuation">,</span> bottom<span class="token punctuation">,</span> left <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 此时不需要考虑数据的顺序</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> top<span class="token punctuation">,</span> left <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="字符串"><a href="#字符串" class="header-anchor">#</a> 字符串</h2> <ul><li>字符串统一使用单引号的形式 ''，eslint: quotes</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> department <span class="token operator">=</span> <span class="token string">&quot;JDC&quot;</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> department <span class="token operator">=</span> <span class="token string">'JDC'</span>
</code></pre></div><ul><li>字符串太长的时候，请不要使用字符串连接符换行 \，而是使用 +</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">'修正前端团队 修正前端团队 修正前端团队'</span> <span class="token operator">+</span>
  <span class="token string">'修正前端团队 修正前端团队 修正前端团队'</span> <span class="token operator">+</span>
  '修正前端团队 修正前端团队
</code></pre></div><ul><li>程序化生成字符串时，请使用模板字符串，eslint: prefer-template template-curly-spacing</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> test <span class="token operator">=</span> <span class="token string">'test'</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> test<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">'a'</span> <span class="token operator">+</span> <span class="token string">'b'</span> <span class="token operator">+</span> test

<span class="token comment">// good</span>
<span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">ab</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>test<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
</code></pre></div><ul><li>不要对字符串使用eval()，会导致太多漏洞， eslint: no-eval</li> <li>不要在字符串中使用不必要的转义字符， eslint: no-useless-escape</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'\'this\' \i\s \&quot;quoted\&quot;'</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token string">'\'this\' is &quot;quoted&quot;'</span>
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">my name is '</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">'</span><span class="token template-punctuation string">`</span></span>
</code></pre></div><h2 id="函数"><a href="#函数" class="header-anchor">#</a> 函数</h2> <ul><li>不要使用Function构造函数创建函数， eslint: no-new-func</li></ul> <blockquote><p>原因：此方式创建函数和对字符串使用 eval() 一样会产生漏洞</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> add <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Function</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'return a + b'</span><span class="token punctuation">)</span>

<span class="token comment">// still bad</span>
<span class="token keyword">const</span> subtract <span class="token operator">=</span> <span class="token function">Function</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">,</span> <span class="token string">'return a - b'</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>在函数签名中使用空格，eslint: space-before-function-paren space-before-blocks</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//bad</span>
<span class="token keyword">const</span> <span class="token function-variable function">f</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span> 
<span class="token keyword">const</span> <span class="token function-variable function">g</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span> 
<span class="token keyword">const</span> <span class="token function-variable function">h</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment">// good </span>
<span class="token keyword">const</span> <span class="token function-variable function">x</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">b</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> 
<span class="token keyword">const</span> <span class="token function-variable function">y</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">a</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><ul><li>使用具名函数表达式而非函数声明，eslint: func-style</li></ul> <blockquote><p>原因：这样做会导致函数声明被提升，这意味着很容易在文件中定义此函数之前引用它，不利于可读性和可维护性。如果你发现函数定义既庞大又复杂以至于不能理解文件的其他部分，或许你应该将它拆分成模块！别忘记要显式命名表达式，而不用管名字是否是从包含的变量（通常出现在现代浏览器中或者使用 Babel 编译器的时候）中推断的。这样会消除错误调用堆栈中的任何假设。 (讨论)</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> <span class="token function-variable function">foo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token comment">// 有别于变量引用的名称</span>
<span class="token keyword">const</span> <span class="token function-variable function">short</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">getPicList</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>用圆括号包裹自执行匿名函数，eslint：wrap-iife</li></ul> <blockquote><p>原因：一个立即执行匿名函数表达式是一个单一的单元，将其及其调用括号包装在括号中，能够清楚地表达这一点。注意，在到处都是模块的世界中几乎不需要 IIFE。</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// immediately-invoked function expression 立即执行函数 (IIFE)</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Welcome to the Internet. Please follow me.'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>不要在非函数代码块（if , while 等）中声明函数，eslint：no-loop-func</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>isUse<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">test</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// do something</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> test
<span class="token keyword">if</span> <span class="token punctuation">(</span>isUse<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">test</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// do something</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>不要将参数命名为 arguments，会导致该参数的优先级高于每个函数作用域内原先存在的 arguments 对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> options<span class="token punctuation">,</span> arguments</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> options<span class="token punctuation">,</span> args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>不要使用 arguments，使用 扩展运算符 ...</li></ul> <blockquote><p>arguments 只是一个类数组，而 ... 是一个真正的数组</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">test</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> args <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span>
  <span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">test</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>使用参数默认值语法而不是修改函数参数</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// really bad</span>
<span class="token keyword">function</span> <span class="token function">handleThings</span> <span class="token punctuation">(</span><span class="token parameter">opts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// No! We shouldn't mutate function arguments.</span>
  <span class="token comment">// Double bad: if opts is falsy it'll be set to an object which may</span>
  <span class="token comment">// be what you want but it can introduce subtle bugs.</span>
  opts <span class="token operator">=</span> opts <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">// still bad</span>
<span class="token keyword">function</span> <span class="token function">handleThings</span> <span class="token punctuation">(</span><span class="token parameter">opts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>opts <span class="token operator">===</span> <span class="token keyword">void</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    opts <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">handleThings</span> <span class="token punctuation">(</span><span class="token parameter">opts <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>避免参数默认值的副作用</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">1</span>
<span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">count</span> <span class="token punctuation">(</span><span class="token parameter">a <span class="token operator">=</span> b<span class="token operator">++</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">// 1</span>
<span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">// 2</span>
<span class="token function">count</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 3</span>
</code></pre></div><ul><li>将参数默认值放在最后</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">handleThings</span> <span class="token punctuation">(</span><span class="token parameter">opts <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">handleThings</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> opts <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>不要更改参数，eslint: no-param-reassign</li></ul> <blockquote><p>原因：操作作为参数传入的对象可能在原始调用中造成意想不到的变量副作用</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">f1</span> <span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  obj<span class="token punctuation">.</span>key <span class="token operator">=</span> <span class="token number">1</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">f2</span> <span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">'key'</span><span class="token punctuation">)</span> <span class="token operator">?</span> obj<span class="token punctuation">.</span>key <span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>不要给参数重新赋值，eslint: no-param-reassign</li></ul> <blockquote><p>原因：参数重新赋值可能会导致无法预期的行为，尤其是当操作 arguments 对象时，也可能导致优化问题，尤其是在 V8 引擎中</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">f1</span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  a <span class="token operator">=</span> <span class="token number">1</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">f2</span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>a<span class="token punctuation">)</span> <span class="token punctuation">{</span> a <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">function</span> <span class="token function">f3</span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> b <span class="token operator">=</span> a <span class="token operator">||</span> <span class="token number">1</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">f4</span> <span class="token punctuation">(</span><span class="token parameter">a <span class="token operator">=</span> <span class="token number">1</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>调用可变参数函数时建议使用展开运算符 ....， eslint: prefer-spread</li></ul> <blockquote><p>原因：显然你无需使用上下文，很难结合 new 和 apply</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>console<span class="token punctuation">,</span> x<span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">...</span>x<span class="token punctuation">)</span>

<span class="token comment">// bad</span>
<span class="token keyword">new</span> <span class="token punctuation">(</span><span class="token class-name">Function</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>Date<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2016</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">[</span><span class="token number">2016</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="箭头函数"><a href="#箭头函数" class="header-anchor">#</a> 箭头函数</h2> <ul><li>当你必须使用函数表达式（传递匿名函数）时，使用箭头函数标记. eslint: prefer-arrow-callback, arrow-spacing</li></ul> <blockquote><p>原因：它将创建在 this 上下文中执行的函数版本，通常是您想要的，并且语法更简洁</p> <p>如果您有一个相当复杂的函数，则可以将该逻辑移到其自己的命名函数表达式中</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span>
  <span class="token keyword">return</span> x <span class="token operator">*</span> y
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span>
  <span class="token keyword">return</span> x <span class="token operator">*</span> y
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>如果函数体只包含一条没有副作用的返回表达式的语句，可以省略花括号并使用隐式的 return， 否则保留花括号并使用 return 语句，eslint: arrow-parens, arrow-body-style</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">number</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> nextNumber <span class="token operator">=</span> number <span class="token operator">+</span> <span class="token number">1</span>
  <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">A string containing the </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>nextNumber<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">number</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">A string containing the </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>number<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> nextNumber <span class="token operator">=</span> number <span class="token operator">+</span> <span class="token number">1</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">A string containing the </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>nextNumber<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">number<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">index</span><span class="token operator">:</span> number
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// No implicit return with side effects</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">===</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// Do something if callback returns true</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> bool <span class="token operator">=</span> <span class="token boolean">false</span>

<span class="token comment">// bad</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> bool <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  bool <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>一旦表达式跨多行，使用圆括号包裹以便更好阅读</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token punctuation">[</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'post'</span><span class="token punctuation">,</span> <span class="token string">'put'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">httpMethod</span> <span class="token operator">=&gt;</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>
    httpMagicObjectWithAVeryLongName<span class="token punctuation">,</span>
    httpMethod
  <span class="token punctuation">)</span>
<span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token string">'post'</span><span class="token punctuation">,</span> <span class="token string">'put'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">httpMethod</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>
    httpMagicObjectWithAVeryLongName<span class="token punctuation">,</span>
    httpMethod
  <span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>函数如果只接收一个参数并且没使用用花括号，则省略圆括号，否则为了清晰明确则使用圆括号包裹参数，注意：总是使用圆括号也是可以接受的，eslint 中的 “always” 选项，eslint: arrow-parens</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> x <span class="token operator">*</span> x<span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> x <span class="token operator">*</span> x<span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">number</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">A long string with the </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>number<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. It’s so long that we’ve broken it </span><span class="token template-punctuation string">`</span></span> <span class="token operator">+</span>
  <span class="token string">'over multiple lines!'</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// bad</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span>
  <span class="token keyword">return</span> x <span class="token operator">*</span> y
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span>
  <span class="token keyword">return</span> x <span class="token operator">*</span> y
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="类-构造函数"><a href="#类-构造函数" class="header-anchor">#</a> 类&amp;构造函数</h2> <ul><li>使用 class，避免直接操作 prototype</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">function</span> <span class="token function">Queue</span> <span class="token punctuation">(</span><span class="token parameter">contents <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>_queue <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">.</span><span class="token punctuation">.</span>contents<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token class-name">Queue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">pop</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_queue<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>_queue<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> value
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">class</span> <span class="token class-name">Queue</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">contents <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>_queue <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>contents<span class="token punctuation">]</span>
  <span class="token punctuation">}</span>

  <span class="token function">pop</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_queue<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>_queue<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> value
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>使用 extends 来实现继承</li></ul> <blockquote><p>原因：这是一个不会破坏 instanceof 的内建实现原型式继承的方式</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> inherits <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'inherits'</span><span class="token punctuation">)</span>
<span class="token keyword">function</span> <span class="token function">PeekableQueue</span><span class="token punctuation">(</span><span class="token parameter">contents</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">Queue</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> contents<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">inherits</span><span class="token punctuation">(</span>PeekableQueue<span class="token punctuation">,</span> Queue<span class="token punctuation">)</span>
<span class="token class-name">PeekableQueue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">peek</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>queue<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">class</span> <span class="token class-name">PeekableQueue</span> <span class="token keyword">extends</span> <span class="token class-name">Queue</span> <span class="token punctuation">{</span>
  <span class="token function">peek</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>queue<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>如果未声明构造函数，则类会有一个默认的构造函数，没必要用空的构造函数或者将其委托给父类，eslint: no-useless-constructor</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">class</span> <span class="token class-name">Jedi</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

  <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">class</span> <span class="token class-name">Rey</span> <span class="token keyword">extends</span> <span class="token class-name">Jedi</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">class</span> <span class="token class-name">Rey</span> <span class="token keyword">extends</span> <span class="token class-name">Jedi</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'Rey'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>避免类成员重复，eslint: no-dupe-class-members</li></ul> <blockquote><p>原因：重复的类成员声明会默认使用最后声明的，通常会导致 bug</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">class</span> <span class="token class-name">Foo</span> <span class="token punctuation">{</span>
  <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">1</span> <span class="token punctuation">}</span>
  <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">2</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">class</span> <span class="token class-name">Foo</span> <span class="token punctuation">{</span>
  <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">1</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">class</span> <span class="token class-name">Foo</span> <span class="token punctuation">{</span>
  <span class="token function">bar</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">2</span> <span class="token punctuation">}</span>
</code></pre></div><h2 id="模块"><a href="#模块" class="header-anchor">#</a> 模块</h2> <ul><li>使用标准的 ES6 模块语法 import 和 export</li></ul> <blockquote><p>原因：模块是未来，让我们现在开始使用未来的特性</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> util <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./util'</span><span class="token punctuation">)</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> util

<span class="token comment">// good</span>
<span class="token keyword">import</span> Util <span class="token keyword">from</span> <span class="token string">'./util'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> Util

<span class="token comment">// better</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Util <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./util'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> Util
</code></pre></div><ul><li>不要使用 import 的通配符 *，这样可以确保你只有一个默认的 export</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> Util <span class="token keyword">from</span> <span class="token string">'./util'</span>

<span class="token comment">// good</span>
<span class="token keyword">import</span> Util <span class="token keyword">from</span> <span class="token string">'./util'</span>
</code></pre></div><ul><li>同个文件每个模块只允许 import 一次，有多个 import 请书写在一起，eslint: no-duplicate-imports</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">import</span> foo <span class="token keyword">from</span> <span class="token string">'foo'</span>
<span class="token comment">// … some other imports … //</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> named1<span class="token punctuation">,</span> named2 <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'foo'</span>

<span class="token comment">// good</span>
<span class="token keyword">import</span> foo<span class="token punctuation">,</span> <span class="token punctuation">{</span> named1<span class="token punctuation">,</span> named2 <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'foo'</span>

<span class="token comment">// good</span>
<span class="token keyword">import</span> foo<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  named1<span class="token punctuation">,</span>
  named2
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'foo'</span>
</code></pre></div><ul><li>将所有 import 语句放在文件最前方，eslint: import/imports-first</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">import</span> foo <span class="token keyword">from</span> <span class="token string">'foo'</span>
foo<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token keyword">import</span> bar <span class="token keyword">from</span> <span class="token string">'bar'</span>

<span class="token comment">// good</span>
<span class="token keyword">import</span> foo <span class="token keyword">from</span> <span class="token string">'foo'</span>
<span class="token keyword">import</span> bar <span class="token keyword">from</span> <span class="token string">'bar'</span>

foo<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>多行导入应该像多行数组和对象文字一样缩进</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> longNameA<span class="token punctuation">,</span> longNameB<span class="token punctuation">,</span> longNameC<span class="token punctuation">,</span> longNameD<span class="token punctuation">,</span> longNameE <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'path'</span>

<span class="token comment">// good</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>
  longNameA<span class="token punctuation">,</span>
  longNameB<span class="token punctuation">,</span>
  longNameC<span class="token punctuation">,</span>
  longNameD<span class="token punctuation">,</span>
  longNameE
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'path'</span>
</code></pre></div><ul><li>在模块 import 声明中禁止使用 Webpack 的 loader 语法，eslint: import/no-webpack-loader-syntax</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">import</span> fooSass <span class="token keyword">from</span> <span class="token string">'css!sass!foo.scss'</span>
<span class="token keyword">import</span> barCss <span class="token keyword">from</span> <span class="token string">'style!css!bar.css'</span>

<span class="token comment">// good</span>
<span class="token keyword">import</span> fooSass <span class="token keyword">from</span> <span class="token string">'foo.scss'</span>
<span class="token keyword">import</span> barCss <span class="token keyword">from</span> <span class="token string">'bar.css'</span>
</code></pre></div><h2 id="迭代器"><a href="#迭代器" class="header-anchor">#</a> 迭代器</h2> <ul><li>不要使用 iterators，建议使用 JS 更高优先级的函数代替 for-in 或 for-of 循环，除非迫不得已，eslint: no-iterator no-restricted-syntax</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span>

<span class="token comment">// bad</span>
<span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> num <span class="token keyword">of</span> numbers<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  sum <span class="token operator">+=</span> num
<span class="token punctuation">}</span>

<span class="token comment">// good</span>
<span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0</span>
numbers<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">num</span> <span class="token operator">=&gt;</span> sum <span class="token operator">+=</span> num<span class="token punctuation">)</span>

<span class="token comment">// better</span>
<span class="token keyword">const</span> sum <span class="token operator">=</span> numbers<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span> num</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> total <span class="token operator">+</span> num<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="生成器"><a href="#生成器" class="header-anchor">#</a> 生成器</h2> <ul><li>现阶段请不要使用生成器 generator</li></ul> <blockquote><p>原因：因为不能很好地翻译成 ES5 代码</p></blockquote> <h2 id="对象属性"><a href="#对象属性" class="header-anchor">#</a> 对象属性</h2> <ul><li>使用 . 来访问对象属性</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> joke <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'haha'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">28</span>
<span class="token punctuation">}</span>

<span class="token comment">// bad</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> joke<span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">]</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> joke<span class="token punctuation">.</span>name
</code></pre></div><ul><li>当访问的属性是变量时使用 []</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> luke <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">jedi</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">28</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">getProp</span> <span class="token punctuation">(</span><span class="token parameter">prop</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> luke<span class="token punctuation">[</span>prop<span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> isJedi <span class="token operator">=</span> <span class="token function">getProp</span><span class="token punctuation">(</span><span class="token string">'jedi'</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="变量声明"><a href="#变量声明" class="header-anchor">#</a> 变量声明</h2> <ul><li>声明变量时，请使用 const、let 关键字，如果没有写关键字，变量就会暴露在全局上下文中，这样很可能会和现有变量冲突，另外，也很难明确该变量的作用域是什么。这里推荐使用 const 来声明变量，我们需要避免全局命名空间的污染。eslint: no-undef prefer-const</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
demo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// good</span>
<span class="token keyword">const</span> demo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Demo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>将所有的 const 和 let 分组</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">let</span> a
<span class="token keyword">const</span> b
<span class="token keyword">let</span> c
<span class="token keyword">const</span> d
<span class="token keyword">let</span> e

<span class="token comment">// good</span>
<span class="token keyword">const</span> b
<span class="token keyword">const</span> d
<span class="token keyword">let</span> a
<span class="token keyword">let</span> c
<span class="token keyword">let</span> e
</code></pre></div><ul><li>变量不要进行链式赋值</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// JavaScript将其解释为</span>
  <span class="token comment">// let a = ( b = ( c = 1 ) );</span>
  <span class="token comment">// let关键字只适用于变量a;变量b和c会变成全局变量。</span>
  <span class="token keyword">let</span> a <span class="token operator">=</span> b <span class="token operator">=</span> c <span class="token operator">=</span> <span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// throws ReferenceError</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token comment">// 1</span>

<span class="token comment">// good</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span>
  <span class="token keyword">let</span> b <span class="token operator">=</span> a
  <span class="token keyword">let</span> c <span class="token operator">=</span> a
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">// throws ReferenceError</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">// throws ReferenceError</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token comment">// throws ReferenceError</span>

<span class="token comment">//同样适用于`const`</span>
</code></pre></div><ul><li>不允许出现未被使用的变量，eslint: no-unused-vars</li></ul> <blockquote><p>原因：声明但未被使用的变量通常是不完全重构犯下的错误.这种变量在代码里浪费空间并会给读者造成困扰</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>

<span class="token keyword">var</span> some_unused_var <span class="token operator">=</span> <span class="token number">42</span>

<span class="token comment">// 只写变量不被认为是被使用的。</span>
<span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token number">10</span>
y <span class="token operator">=</span> <span class="token number">5</span>

<span class="token comment">// 对自身修改的读取不被认为是被使用的。</span>
<span class="token keyword">var</span> z <span class="token operator">=</span> <span class="token number">0</span>
z <span class="token operator">=</span> z <span class="token operator">+</span> <span class="token number">1</span>

<span class="token comment">// 未使用的函数参数。</span>
<span class="token keyword">function</span> <span class="token function">getX</span> <span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> x
<span class="token punctuation">}</span>

<span class="token comment">// good</span>

<span class="token keyword">function</span> <span class="token function">getXPlusY</span> <span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> x <span class="token operator">+</span> y
<span class="token punctuation">}</span>

<span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">const</span> y <span class="token operator">=</span> a <span class="token operator">+</span> <span class="token number">2</span>

<span class="token function">alert</span><span class="token punctuation">(</span><span class="token function">getXPlusY</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// 省略指定键命的提取对象。</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> type<span class="token punctuation">,</span> <span class="token operator">...</span>coords <span class="token punctuation">}</span> <span class="token operator">=</span> data
<span class="token comment">// 'coords'现在是没有'type'属性的'data'对象。</span>
</code></pre></div><h2 id="hoisting"><a href="#hoisting" class="header-anchor">#</a> Hoisting</h2> <ul><li>var 存在变量提升的情况，即 var 声明会被提升至该作用域的顶部，但是他们的赋值并不会。而 const 和 let 并不存在这种情况，他们被赋予了 Temporal Dead Zones, TDZ， 了解 typeof 不再安全很重要</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>
<span class="token keyword">function</span> <span class="token function">example</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>notDefined<span class="token punctuation">)</span>   <span class="token comment">// =&gt; throws a ReferenceError</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">example</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>declareButNotAssigned<span class="token punctuation">)</span>  <span class="token comment">// =&gt; undefined</span>
  <span class="token keyword">var</span> declaredButNotAssigned <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">example</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> declaredButNotAssigned
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>declaredButNotAssigned<span class="token punctuation">)</span>   <span class="token comment">// =&gt; undefined</span>
  declaredButNotAssigned <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">example</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>declaredButNotAssigned<span class="token punctuation">)</span>   <span class="token comment">// =&gt; throws a ReferenceError</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> declaredButNotAssigned<span class="token punctuation">)</span>  <span class="token comment">// =&gt; throws a ReferenceError</span>
  <span class="token keyword">const</span> declaredButNotAssigned <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>匿名函数的变量名会提升，但函数内容不会</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">example</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anonymous<span class="token punctuation">)</span>  <span class="token comment">// =&gt; undefined</span>

  <span class="token function">anonymous</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

  <span class="token keyword">var</span> <span class="token function-variable function">anonymous</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>命名的函数表达式的变量名会被提升，但函数名和函数函数内容并不会</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>named<span class="token punctuation">)</span>  <span class="token comment">// =&gt; undefined</span>

  <span class="token function">named</span><span class="token punctuation">(</span><span class="token punctuation">)</span>   <span class="token comment">// =&gt; TypeError named is not a function</span>

  <span class="token function">superPower</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">// =&gt; ReferenceError superPower is not defined</span>

  <span class="token keyword">var</span> <span class="token function-variable function">named</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">superPower</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Flying'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">example</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>named<span class="token punctuation">)</span>  <span class="token comment">// =&gt; undefined</span>

  <span class="token function">named</span><span class="token punctuation">(</span><span class="token punctuation">)</span>   <span class="token comment">// =&gt; TypeError named is not a function</span>

  <span class="token keyword">var</span> <span class="token function-variable function">named</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">named</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'named'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="比较运算符-相等"><a href="#比较运算符-相等" class="header-anchor">#</a> 比较运算符&amp;相等</h2> <ul><li><p>使用 === 和 !== 而非 == 和 !=，eslint: eqeqeq</p></li> <li><p>条件声明例如 if 会用 ToBoolean 这个抽象方法将表达式转成布尔值并遵循如下规则</p> <ul><li>Objects 等于 true</li> <li>Undefined 等于 false</li> <li>Null 等于 false</li> <li>Booleans 等于 布尔值</li> <li>Numbers 在 +0, -0, 或者 NaN 的情况下等于 false, 其他情况是 true</li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// true</span>
  <span class="token comment">// 数组(即使是空数组)也是对象，对象等于true</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="分号"><a href="#分号" class="header-anchor">#</a> 分号</h2> <ul><li>使用分号。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// bad</span>
<span class="token keyword">const</span> test <span class="token operator">=</span> <span class="token string">'good'</span>
<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">'hahaha'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// good</span>
<span class="token keyword">const</span> test <span class="token operator">=</span> <span class="token string">'good'</span><span class="token punctuation">;</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">'hahaha'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="标准特性"><a href="#标准特性" class="header-anchor">#</a> 标准特性</h2> <p>为了代码的可移植性和兼容性，我们应该最大化的使用标准方法，例如优先使用 string.charAt(3) 而不是 string[3]</p> <h2 id="eval"><a href="#eval" class="header-anchor">#</a> eval()</h2> <p>由于 eval 方法比较 evil，所以我们约定禁止使用该方法</p> <p>with() {}</p> <p>由于 with 方法会产生神奇的作用域，所以我们也是禁止使用该方法的</p> <h2 id="修改内置对象的原型"><a href="#修改内置对象的原型" class="header-anchor">#</a> 修改内置对象的原型</h2> <p>不要修改内置对象，如 Object 和 Array</p> <h2 id="命名"><a href="#命名" class="header-anchor">#</a> 命名</h2> <ol><li><p>采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线， 也不能以下划线或美元符号结束</p></li> <li><p>方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风 格，必须遵从驼峰形式</p></li></ol> <div class="language- extra-class"><pre class="language-text"><code>localValue / getHttpMessage() / inputUserId
</code></pre></div><h3 id="方法"><a href="#方法" class="header-anchor">#</a> 方法</h3> <ul><li>其中 method 方法命名必须是 动词 或者 动词+名词 形式</li></ul> <div class="language- extra-class"><pre class="language-text"><code>saveShopCarData / openShopCarInfoDialog
</code></pre></div><ul><li>特此说明，增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）</li></ul> <div class="language- extra-class"><pre class="language-text"><code>附： 函数方法常用的动词:
get 获取/set 设置,
add 增加/remove 删除,
create 创建/destory 销毁,
start 启动/stop 停止,
open 打开/close 关闭,
read 读取/write 写入,
load 载入/save 保存,
begin 开始/end 结束, backup 备份/restore 恢复, import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离,
bind 绑定/separate 分离,
view 查看/browse 浏览,
edit 编辑/modify 修改,
select 选取/mark 标记,
copy 复制/paste 粘贴,
undo 撤销/redo 重做,
insert 插入/delete 移除,
add 加入/append 添加,
clean 清理/clear 清除,
index 索引/sort 排序,
find 查找/search 搜索,
increase 增加/decrease 减少,
play 播放/pause 暂停,
launch 启动/run 运行,
compile 编译/execute 执行,
debug 调试/trace 跟踪,
observe 观察/listen 监听,
build 构建/publish 发布,
input 输入/output 输出,
encode 编码/decode 解码,
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩,
pack 打包/unpack 解包,
parse 解析/emit 生成,
connect 连接/disconnect 断开,
send 发送/receive 接收,
download 下载/upload 上传,
refresh 刷新/synchronize 同步,
update 更新/revert 复原,
lock 锁定/unlock 解锁,
check out 签出/check in 签入,
submit 提交/commit 交付,
push 推/pull 拉,
expand 展开/collapse 折叠,
enter 进入/exit 退出,
abort 放弃/quit 离开,
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集
</code></pre></div><ol start="3"><li>常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚， 不要嫌名字长</li></ol> <div class="language- extra-class"><pre class="language-text"><code>MAX_COUNT          //bad
MAX_STOCK_COUNT    //good
</code></pre></div><h2 id="代码格式"><a href="#代码格式" class="header-anchor">#</a> 代码格式</h2> <ol><li>使用 2 个空格进行缩进</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">&lt;</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  x <span class="token operator">+=</span> <span class="token number">10</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  x <span class="token operator">+=</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以 提升可读性</li></ol> <ul><li>说明：任何情形，没有必要插入多个空行进行隔开。</li></ul> <h2 id="字符串-2"><a href="#字符串-2" class="header-anchor">#</a> 字符串</h2> <ul><li>统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;foo&quot;</span>
<span class="token keyword">let</span> testDiv <span class="token operator">=</span> <span class="token string">'&lt;div id=&quot;test&quot;&gt;&lt;/div&gt;'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;foo&quot;</span>
<span class="token keyword">let</span> testDiv <span class="token operator">=</span> <span class="token string">&quot;&lt;div id='test'&gt;&lt;/div&gt;&quot;</span>
</code></pre></div><h2 id="对象声明"><a href="#对象声明" class="header-anchor">#</a> 对象声明</h2> <ol><li>使用字面值创建对象</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//bad</span>
<span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><ol start="2"><li>使用字面量来代替对象构造器</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//bad</span>
<span class="token keyword">var</span> user <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
user<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">0</span>
user<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token number">0</span>
user<span class="token punctuation">.</span>city <span class="token operator">=</span> <span class="token number">0</span>
</code></pre></div><h2 id="使用-es6"><a href="#使用-es6" class="header-anchor">#</a> 使用 ES6+</h2> <ul><li>必须优先使用 ES6+ 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复 用。比如箭头函数、await/async ， 解构， let ， for…of 等等。</li></ul> <h2 id="括号"><a href="#括号" class="header-anchor">#</a> 括号</h2> <p>*下列关键字后必须有大括号（即使代码块的内容只有一行） *：if, else, for, while, do, switch, try, catch, finally, with。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>  <span class="token comment">//good</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">//bad</span>
</code></pre></div><h2 id="undefined-判断"><a href="#undefined-判断" class="header-anchor">#</a> undefined 判断</h2> <ul><li>永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> person <span class="token operator">===</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>   <span class="token comment">//good</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>person <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>      <span class="token comment">//bad</span>
</code></pre></div><h2 id="条件判断和循环最多三层"><a href="#条件判断和循环最多三层" class="header-anchor">#</a> 条件判断和循环最多三层</h2> <ul><li>条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的 三目运算符。</li> <li>如果超过 3 层请抽成函数，并写清楚注释。</li></ul> <h2 id="this-的转换命名"><a href="#this-的转换命名" class="header-anchor">#</a> this 的转换命名</h2> <ul><li>对上下文 this 的引用只能使用 ’that’ 来命名。</li></ul> <h2 id="慎用-console-log"><a href="#慎用-console-log" class="header-anchor">#</a> 慎用 console.log</h2> <ul><li>因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能。</li></ul> <h1 id="代码规范"><a href="#代码规范" class="header-anchor">#</a> 代码规范</h1> <h2 id="在单行代码块中使用空格"><a href="#在单行代码块中使用空格" class="header-anchor">#</a> 在单行代码块中使用空格</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token punctuation">{</span> bar <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//bad</span>
<span class="token keyword">function</span> <span class="token function">foo</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token punctuation">{</span>bar <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">}</span>
</code></pre></div><h2 id="大括号风格"><a href="#大括号风格" class="header-anchor">#</a> 大括号风格</h2> <p>在编程过程中，大括号风格与缩进风格紧密联系，用来描述大括号相对代码块位置的方法有很多。在 JavaScript 中，主要有三种风格，如下：</p> <ul><li><p>我们团队约定使用 One True Brace Style 风格</p></li> <li><p>One True Brace Style</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  <span class="token function">baz</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>Stroustrup</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span> <span class="token punctuation">{</span>
  <span class="token function">baz</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>Allman</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>foo<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
  <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">else</span>
<span class="token punctuation">{</span>
  <span class="token function">baz</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="变量命名"><a href="#变量命名" class="header-anchor">#</a> 变量命名</h2> <p>当命名变量时，主流分为驼峰式命名（constiableName）和下划线命名（constiable_name）两大阵营。</p> <ul><li>团队约定使用驼峰式命名</li></ul> <h2 id="拖尾逗号"><a href="#拖尾逗号" class="header-anchor">#</a> 拖尾逗号</h2> <p>在 ECMAScript5 里面，对象字面量中的拖尾逗号是合法的，但在 IE8（非 IE8 文档模式）下，当出现拖尾逗号，则会抛出错误。</p> <p>拖尾逗号的例子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">'22'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>拖尾逗号的好处是，简化了对象和数组添加或删除元素，我们只需要修改新增的行即可，并不会增加差异化的代码行数。</p></blockquote> <blockquote><p>因为拖尾逗号有好也有不好，所以团队约定允许在最后一个元素或属性与闭括号 ] 或 } 在不同行时，可以（但不要求）使用拖尾逗号。当在同一行时，禁止使用拖尾逗号。</p></blockquote> <h2 id="逗号空格"><a href="#逗号空格" class="header-anchor">#</a> 逗号空格</h2> <p>逗号前后的空格可以提高代码的可读性，团队约定在逗号后面使用空格，逗号前面不加空格。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> bar <span class="token operator">=</span> <span class="token number">2</span>
<span class="token comment">//bad</span>
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span>bar <span class="token operator">=</span> <span class="token number">2</span>
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">,</span> bar <span class="token operator">=</span> <span class="token number">2</span>
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span> <span class="token punctuation">,</span>bar <span class="token operator">=</span> <span class="token number">2</span>
</code></pre></div><h2 id="逗号风格"><a href="#逗号风格" class="header-anchor">#</a> 逗号风格</h2> <p>逗号分隔列表时，在 JavaScript 中主要有两种逗号风格：</p> <ul><li>标准风格，逗号放置在当前行的末尾</li> <li>逗号前置风格，逗号放置在下一行的开始位置</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span>
    bar <span class="token operator">=</span> <span class="token number">2</span>

<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span>
            <span class="token string">'age'</span><span class="token punctuation">]</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//bad</span>
<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span>
<span class="token punctuation">,</span>
bar <span class="token operator">=</span> <span class="token number">2</span>

<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token number">1</span>
<span class="token punctuation">,</span> bar <span class="token operator">=</span> <span class="token number">2</span>

<span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'name'</span>
          <span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">]</span>
</code></pre></div><h2 id="计算属性的空格"><a href="#计算属性的空格" class="header-anchor">#</a> 计算属性的空格</h2> <p>团队约定在对象的计算属性内，禁止使用空格</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
obj<span class="token punctuation">[</span><span class="token string">'foo'</span><span class="token punctuation">]</span>
<span class="token comment">//bad</span>
obj<span class="token punctuation">[</span><span class="token string">'foo'</span> <span class="token punctuation">]</span>
obj<span class="token punctuation">[</span> <span class="token string">'foo'</span><span class="token punctuation">]</span>
obj<span class="token punctuation">[</span> <span class="token string">'foo'</span> <span class="token punctuation">]</span>
</code></pre></div><h2 id="拖尾换行"><a href="#拖尾换行" class="header-anchor">#</a> 拖尾换行</h2> <p>在非空文件中，存在拖尾换行是一个常见的 UNIX 风格，它的好处是可以方便在串联和追加文件时不会打断 Shell 的提示。在日常的项目中，保留拖尾换行的好处是，可以减少版本控制时的代码冲突。</p> <blockquote><p>可以通过 .editorconfig 添加 EOL</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">function</span> <span class="token function">func</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something</span>
<span class="token punctuation">}</span>
  <span class="token comment">// 此处是新的一行</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//bad</span>
<span class="token keyword">function</span> <span class="token function">func</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="函数调用"><a href="#函数调用" class="header-anchor">#</a> 函数调用</h2> <p>为了避免语法错误，团队约定在函数调用时，禁止使用空格</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">//bad</span>
<span class="token function">fn</span> <span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token function">fn</span>
<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="缩进"><a href="#缩进" class="header-anchor">#</a> 缩进</h2> <p>代码保持一致的缩进，是作为工程师的职业素养。但缩进用两个空格，还是四个空格，是用 Tab 还是空格呢？这样的争论太多了，也得不出答案。本规范结合了市面上优秀的开源项目，姑且约定使用 空格 来缩进，而且缩进使用两个空格。</p> <blockquote><p>那是不是不能使用 Tab 进行缩进了？我们可以通过配置 .editorconfig ，将 Tab 自动转换为空格。</p></blockquote> <h2 id="对象字面量的键值缩进"><a href="#对象字面量的键值缩进" class="header-anchor">#</a> 对象字面量的键值缩进</h2> <p>团队约定对象字面量的键和值之间不能存在空格，且要求对象字面量的冒号和值之间存在一个空格</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string-property property">'foo'</span><span class="token operator">:</span> <span class="token string">'haha'</span> <span class="token punctuation">}</span>
<span class="token comment">//bad</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string-property property">'foo'</span> <span class="token operator">:</span> <span class="token string">'haha'</span> <span class="token punctuation">}</span>
</code></pre></div><h2 id="构造函数首字母大写"><a href="#构造函数首字母大写" class="header-anchor">#</a> 构造函数首字母大写</h2> <p>在 JavaScript 中 new 操作符用来创建某个特定类型的对象的一个实例，该类型的对象是由一个构造函数表示的。由于构造函数只是常规函数，唯一区别是使用 new 来调用。所以我们团队约定构造函数的首字母要大小，以此来区分构造函数和普通函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">const</span> fooItem <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">//bad</span>
<span class="token keyword">const</span> fooItem <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="构造函数的参数"><a href="#构造函数的参数" class="header-anchor">#</a> 构造函数的参数</h2> <p>在 JavaScript 中，通过 new 调用构造函数时，如果不带参数，可以省略后面的圆括号。但这样会造成与整体的代码风格不一致，所以团队约定使用圆括号</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">//bad</span>
<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span>
</code></pre></div><h2 id="链式调用"><a href="#链式调用" class="header-anchor">#</a> 链式调用</h2> <p>链式调用如果放在同一行，往往会造成代码的可读性差，但有些时候，短的链式调用并不会影响美观。所以本规范约定一行最多只能有四个链式调用，超过就要求换行。</p> <h2 id="空行"><a href="#空行" class="header-anchor">#</a> 空行</h2> <p>空白行对于分离代码逻辑有帮助，但过多的空行会占据屏幕的空间，影响可读性。团队约定最大连续空行数为 2</p> <h2 id="链式赋值"><a href="#链式赋值" class="header-anchor">#</a> 链式赋值</h2> <p>链式赋值容易造成代码的可读性差，所以团队约定禁止使用链式赋值</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token number">1</span>
<span class="token comment">//bad</span>
<span class="token keyword">const</span> a <span class="token operator">=</span> b <span class="token operator">=</span> c <span class="token operator">=</span> <span class="token number">1</span>
</code></pre></div><h2 id="变量声明-2"><a href="#变量声明-2" class="header-anchor">#</a> 变量声明</h2> <p>JavaScript 允许在一个声明中，声明多个变量。团队约定在声明变量时，一个声明只能有一个变量</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">const</span> a
<span class="token keyword">const</span> b
<span class="token keyword">const</span> c
<span class="token comment">//bad</span>
<span class="token keyword">const</span> a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c
</code></pre></div><h2 id="代码块空格"><a href="#代码块空格" class="header-anchor">#</a> 代码块空格</h2> <p>一致性是任何风格指南的重要组成部分。虽然在哪里放置块的开括号纯属个人偏好，但在整个项目中应该保持一致。不一致的风格将会分散读者阅读代码的注意力。</p> <blockquote><p>团队约定代码块前要添加空格</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">a</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">//bad</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">a</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><h2 id="函数声明的空格"><a href="#函数声明的空格" class="header-anchor">#</a> 函数声明的空格</h2> <p>当格式化一个函数，函数名或 function 关键字与左括号之间允许有空白。命名函数要求函数名和 function 关键字之间有空格，但是匿名函数要求不加空格。</p> <blockquote><p>团队约定函数括号前要加空格</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">function</span> <span class="token function">func</span> <span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
<span class="token comment">//bad</span>
<span class="token keyword">function</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="操作符的空格"><a href="#操作符的空格" class="header-anchor">#</a> 操作符的空格</h2> <p>团队约定操作符前后都需要添加空格</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//good</span>
<span class="token keyword">const</span> sum <span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span>
<span class="token comment">//bad</span>
<span class="token keyword">const</span> sum <span class="token operator">=</span> <span class="token number">1</span><span class="token operator">+</span><span class="token number">2</span>
</code></pre></div><h2 id="bom"><a href="#bom" class="header-anchor">#</a> BOM</h2> <p>Unicode 字节顺序标记 (BOM) 用来指定代码单元是高字节序还是低字节序。也就是说，是高位在前还是低位在前。UTF-8 不需要 BOM 来表明字节顺序，因为单个字节并不影响字节顺序。</p> <p>相信不少同学遇到过 BOM 的坑，这里不多说了，切记不要使用 windows 的记事本改代码！</p></div></section> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">10/9/2023, 2:58:10 PM</span></div></footer> <!----> <div class="comments-wrapper"><!----></div> <ul class="side-bar sub-sidebar-wrapper" style="width:12rem;" data-v-cb1513f6><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#类型" class="sidebar-link reco-side-类型" data-v-cb1513f6>类型</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#引用" class="sidebar-link reco-side-引用" data-v-cb1513f6>引用</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#对象" class="sidebar-link reco-side-对象" data-v-cb1513f6>对象</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#数组" class="sidebar-link reco-side-数组" data-v-cb1513f6>数组</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#解构赋值" class="sidebar-link reco-side-解构赋值" data-v-cb1513f6>解构赋值</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#字符串" class="sidebar-link reco-side-字符串" data-v-cb1513f6>字符串</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#函数" class="sidebar-link reco-side-函数" data-v-cb1513f6>函数</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#箭头函数" class="sidebar-link reco-side-箭头函数" data-v-cb1513f6>箭头函数</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#类-构造函数" class="sidebar-link reco-side-类-构造函数" data-v-cb1513f6>类&amp;构造函数</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#模块" class="sidebar-link reco-side-模块" data-v-cb1513f6>模块</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#迭代器" class="sidebar-link reco-side-迭代器" data-v-cb1513f6>迭代器</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#生成器" class="sidebar-link reco-side-生成器" data-v-cb1513f6>生成器</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#对象属性" class="sidebar-link reco-side-对象属性" data-v-cb1513f6>对象属性</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#变量声明" class="sidebar-link reco-side-变量声明" data-v-cb1513f6>变量声明</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#hoisting" class="sidebar-link reco-side-hoisting" data-v-cb1513f6>Hoisting</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#比较运算符-相等" class="sidebar-link reco-side-比较运算符-相等" data-v-cb1513f6>比较运算符&amp;相等</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#分号" class="sidebar-link reco-side-分号" data-v-cb1513f6>分号</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#标准特性" class="sidebar-link reco-side-标准特性" data-v-cb1513f6>标准特性</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#eval" class="sidebar-link reco-side-eval" data-v-cb1513f6>eval()</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#修改内置对象的原型" class="sidebar-link reco-side-修改内置对象的原型" data-v-cb1513f6>修改内置对象的原型</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#命名" class="sidebar-link reco-side-命名" data-v-cb1513f6>命名</a></li><li class="level-3" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#方法" class="sidebar-link reco-side-方法" data-v-cb1513f6>方法</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#代码格式" class="sidebar-link reco-side-代码格式" data-v-cb1513f6>代码格式</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#字符串-2" class="sidebar-link reco-side-字符串-2" data-v-cb1513f6>字符串</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#对象声明" class="sidebar-link reco-side-对象声明" data-v-cb1513f6>对象声明</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#使用-es6" class="sidebar-link reco-side-使用-es6" data-v-cb1513f6>使用 ES6+</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#括号" class="sidebar-link reco-side-括号" data-v-cb1513f6>括号</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#undefined-判断" class="sidebar-link reco-side-undefined-判断" data-v-cb1513f6>undefined 判断</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#条件判断和循环最多三层" class="sidebar-link reco-side-条件判断和循环最多三层" data-v-cb1513f6>条件判断和循环最多三层</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#this-的转换命名" class="sidebar-link reco-side-this-的转换命名" data-v-cb1513f6>this 的转换命名</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#慎用-console-log" class="sidebar-link reco-side-慎用-console-log" data-v-cb1513f6>慎用 console.log</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#在单行代码块中使用空格" class="sidebar-link reco-side-在单行代码块中使用空格" data-v-cb1513f6>在单行代码块中使用空格</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#大括号风格" class="sidebar-link reco-side-大括号风格" data-v-cb1513f6>大括号风格</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#变量命名" class="sidebar-link reco-side-变量命名" data-v-cb1513f6>变量命名</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#拖尾逗号" class="sidebar-link reco-side-拖尾逗号" data-v-cb1513f6>拖尾逗号</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#逗号空格" class="sidebar-link reco-side-逗号空格" data-v-cb1513f6>逗号空格</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#逗号风格" class="sidebar-link reco-side-逗号风格" data-v-cb1513f6>逗号风格</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#计算属性的空格" class="sidebar-link reco-side-计算属性的空格" data-v-cb1513f6>计算属性的空格</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#拖尾换行" class="sidebar-link reco-side-拖尾换行" data-v-cb1513f6>拖尾换行</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#函数调用" class="sidebar-link reco-side-函数调用" data-v-cb1513f6>函数调用</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#缩进" class="sidebar-link reco-side-缩进" data-v-cb1513f6>缩进</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#对象字面量的键值缩进" class="sidebar-link reco-side-对象字面量的键值缩进" data-v-cb1513f6>对象字面量的键值缩进</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#构造函数首字母大写" class="sidebar-link reco-side-构造函数首字母大写" data-v-cb1513f6>构造函数首字母大写</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#构造函数的参数" class="sidebar-link reco-side-构造函数的参数" data-v-cb1513f6>构造函数的参数</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#链式调用" class="sidebar-link reco-side-链式调用" data-v-cb1513f6>链式调用</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#空行" class="sidebar-link reco-side-空行" data-v-cb1513f6>空行</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#链式赋值" class="sidebar-link reco-side-链式赋值" data-v-cb1513f6>链式赋值</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#变量声明-2" class="sidebar-link reco-side-变量声明-2" data-v-cb1513f6>变量声明</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#代码块空格" class="sidebar-link reco-side-代码块空格" data-v-cb1513f6>代码块空格</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#函数声明的空格" class="sidebar-link reco-side-函数声明的空格" data-v-cb1513f6>函数声明的空格</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#操作符的空格" class="sidebar-link reco-side-操作符的空格" data-v-cb1513f6>操作符的空格</a></li><li class="level-2" data-v-cb1513f6><a href="/sjj-blog/blogs/standards/javascript-standards.html#bom" class="sidebar-link reco-side-bom" data-v-cb1513f6>BOM</a></li></ul></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div></div></div>
    <script src="/sjj-blog/assets/js/app.ab5bad9b.js" defer></script><script src="/sjj-blog/assets/js/3.136f62ef.js" defer></script><script src="/sjj-blog/assets/js/1.a27fba8e.js" defer></script><script src="/sjj-blog/assets/js/17.1bacbab3.js" defer></script>
  </body>
</html>
